<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>

<!--遍历数组-->
<div id="app1">
    <ul>
        <!--使用逗号分隔-->
        <li v-for="(item, index) in items">
            {{index}} : {{item.message}}
        </li>
    </ul>
</div>


<!--遍历对象属性-->
<div id="app2">
    <ul>
        <li v-for="(value, key, index) of person">
            {{index}}--{{key}} : {{value}}
        </li>
    </ul>


</div>






<script>
    var app1 = new Vue({
        el: "#app1",
        data: {
            items: [
                {message: "hello"},
                {message: "hi"},
                {message: "你好！"}
            ]
        }
    })

    var app2 = new Vue({
        el: "#app2",
        data: {
            person: {
                name: "zql",
                age: 12,
                address: "weasljd"
            }
        }
    })

</script>
</body>
</html>